import React from 'react';
import { DatePicker, Form, Row, Col } from 'antd';
import MyEcharts from '../../../Component/echarts/index';

class Home extends React.Component {
  formRef = React.createRef();
  state = {
    layout: {
      //表单位置
      labelCol: { span: 12 },
      wrapperCol: { span: 24 },
    },
    yearsNum: '',
    yearsMoney: '',
  };
  onFinish = val => {
    console.log(val);
  };
  onChange = (date, dateString) => {
    let yearsNum = dateString + '年合同数量统计表';
    let yearsMoney = dateString + '年合同金额统计表';
    this.setState(x => {
      return (x.yearsNum = yearsNum), (x.yearsMoney = yearsMoney);
    });
  };
  render() {
    const { layout, yearsMoney, yearsNum } = this.state;
    return (
      <div>
        <div className="topSelect">
          <Form {...layout} ref={this.formRef}>
            <Row gutter={24}>
              <Col span="24">
                <Form.Item name="projectName" label="查询年份">
                  <DatePicker onChange={this.onChange} placeholder="请选择查询年份" picker="year" />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
        <div className="clear">
          <div className="floatLeft">
            <MyEcharts
              data={{
                idName: 'main',
                years: yearsNum || new Date().getFullYear() + '年合同数量统计表',
                xdata: [
                  '1月',
                  '2月',
                  '3月',
                  '4月',
                  '5月',
                  '6月',
                  '7月',
                  '8月',
                  '9月',
                  '10月',
                  '11月',
                  '12月',
                ],
                // xdata: this.state.showtype,
                thetype: ['合同数量'],
                // thetype: this.state.thetype,
                ydata: {
                  ydata1: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                  // ydata1: this.state.kucun,
                },
              }}
            />
          </div>
          <div className="floatLeft">
            <MyEcharts
              data={{
                idName: 'Secondmain',
                years: yearsMoney || new Date().getFullYear() + '年合同金额统计表',
                xdata: [
                  '1月',
                  '2月',
                  '3月',
                  '4月',
                  '5月',
                  '6月',
                  '7月',
                  '8月',
                  '9月',
                  '10月',
                  '11月',
                  '12月',
                ],
                // xdata: this.state.showtype,
                thetype: ['合同金额'],
                // thetype: this.state.thetype,
                ydata: {
                  ydata1: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                  // ydata1: this.state.kucun,
                },
              }}
            />
          </div>
        </div>
      </div>
    );
  }
}
export default Home;
